CSS/HTML

推荐列表 站点导航

当前位置:首页 > 脚本编程 > CSS/HTML >

css如何实现对号效果

来源:网络整理  作者:  发布时间:2020-12-19 03:53
实现思路:1、给块级元素设置高度和宽度;2、设置元素相邻的两个border;3、旋转元素。...

解析:

行级元素直接设置宽度和高度没有用,需要设置其 display 使其变为块级元素。例如:span 需要设置 display 为 inline-block 才能适用于本例效果

旋转元素

CSS

设置元素相邻的两个 border

366bd6b8bd5257f9c1d486f772d5dfd.png

如上图,第一个为两条线等宽的对号效果,第二个为两条线不等宽的对号效果;第三个为两条线等宽等长的对号效果。详细实现请参见 check 源码。

可以根据实际需求调整元素宽度和高度

设置相邻 border 的样式,得到对号的大体轮廓

设置宽度和高度,得出一个矩形效果,并且矩形中没有内容

此处需要使用块级元素

<div class="check-style-unequal-width"></div>

解析:

可以根据实际需求设置不同的 border,以及相邻 border 的宽度

(相关推荐:css视频教程

使用旋转属性,成功得到对号

.check-style-unequal-width { width: 8px; height: 16px; border-color: #009933; border-style: solid; border-width: 0 3px 5px 0; transform: rotate(45deg); }

解析:

注意事项:

不需要设置元素内容

实现对号效果,一种思路是利用现成的符号,直接在网上搜索到 √,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是:

HTML

给块级元素设置宽度和高度

运行效果

可以对此效果做简单的修改,作用于伪元素 ::before 和 ::after。可参考 ::before & ::after

css如何实现对号效果

相关热词: CSS

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/5453.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

css如何实现对号效果

2020-12-19 编辑:

解析:

行级元素直接设置宽度和高度没有用,需要设置其 display 使其变为块级元素。例如:span 需要设置 display 为 inline-block 才能适用于本例效果

旋转元素

CSS

设置元素相邻的两个 border

366bd6b8bd5257f9c1d486f772d5dfd.png

如上图,第一个为两条线等宽的对号效果,第二个为两条线不等宽的对号效果;第三个为两条线等宽等长的对号效果。详细实现请参见 check 源码。

可以根据实际需求调整元素宽度和高度

设置相邻 border 的样式,得到对号的大体轮廓

设置宽度和高度,得出一个矩形效果,并且矩形中没有内容

此处需要使用块级元素

<div class="check-style-unequal-width"></div>

解析:

可以根据实际需求设置不同的 border,以及相邻 border 的宽度

(相关推荐:css视频教程

使用旋转属性,成功得到对号

.check-style-unequal-width { width: 8px; height: 16px; border-color: #009933; border-style: solid; border-width: 0 3px 5px 0; transform: rotate(45deg); }

解析:

注意事项:

不需要设置元素内容

实现对号效果,一种思路是利用现成的符号,直接在网上搜索到 √,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是:

HTML

给块级元素设置宽度和高度

运行效果

可以对此效果做简单的修改,作用于伪元素 ::before 和 ::after。可参考 ::before & ::after

css如何实现对号效果

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jiaob/cssm/5453.shtml

相关文章

风云图片

推荐阅读

返回CSS/HTML频道首页